<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>15-背景位置精确坐标</title>
  <style>
    .img {
      width: 420px;
      height: 400px;
      background-color: plum;
      background-image: url('active.png');
      background-repeat: no-repeat;

      /* background-position: x(横坐标) y(纵坐标); 严格顺序 */
      /* 1. 图片距离x轴20px 距离y50px */
      /* background-position: 20px 50px */

      /* 2. 图片距离x轴50px 距离y20px */
      /* background-position: 50px 20px */

      /* 3. 图片距离x轴20px 第二个值不指定时默认垂直居中 */
      /* background-position: 20px; */

      /* 混合使用 */
      /* 4. 图片水平居中 距离y轴20px */
      background-position: center 20px;

    }
  </style>
</head>

<body>

  <div class="img"></div>

</body>

</html>